<template>
  <div>
    <a-row :style="{ width: width }">
      <a-col :span="11">
        <YearMonthWeekPicker
          ref="firstPicker"
          :beginDay="beginDay"
          :year="fromWeek.year"
          :month="fromWeek.month"
          :week="fromWeek.week"
          :availableFromDate="availableFromDate"
          :availableToDate="availableToDate"  
          :years="years"
          @change="firstPickerChange"
        ></YearMonthWeekPicker>
      </a-col>
      <a-col :span="1" style="text-align">-</a-col>
      <a-col :span="11">
        <YearMonthWeekPicker
          ref="secondPicker"
          :beginDay="beginDay"
          :year="toWeek.year"
          :month="toWeek.month"
          :week="toWeek.week"
          :availableFromDate="secondPickerFromDate"
          :availableToDate="availableToDate"
          :years="years"
          @change="pickerChange"
        ></YearMonthWeekPicker>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import YearMonthWeekPicker from "./YearMonthWeekPicker";
export default {
  components: { YearMonthWeekPicker },
  props: {
    //定义按周几作为一周的开始
    beginDay: {
      type: Number,
      default: 6,
    }, //周开始为周六，周日为 0，以此类推
    width: {
      type: String,
      default: "500px",
    },
    //日期范围开始
    availableFromDate: {
      type: Date,
      default: null,
    },
    //日期范围结束
    availableToDate: {
      type: Date,
      default: null,
    },
    fromWeek: {
      type: Object,
      default() {
        return {
          year: new Date().getFullYear(),
          month: new Date().getMonth() + 1,
          week: 1,
        };
      },
    },
    toWeek: {
      type: Object,
      default() {
        return {
          year: new Date().getFullYear(),
          month: new Date().getMonth() + 1,
          week: 2,
        };
      },
    },
  },
  watch: {
    availableFromDate() {
      this.availableDateChange();
    },
    availableToDate() {
      this.availableDateChange();
    },
  },
  data() {
    return {
      secondPickerFromDate: null,
      years: Array.from(new Array(20).keys()).map(
        (v, i) => new Date().getFullYear() - i
      ),
    };
  },
  mounted() {
    this.availableDateChange();
  },
  methods: {
    availableDateChange() {
      this.years = [];
      var fromYear = 0;
      var toYear = 0;
      if (!this.availableFromDate) fromYear = new Date().getFullYear() - 20;
      else fromYear = this.availableFromDate.getFullYear();

      if (!this.availableToDate) toYear = new Date().getFullYear();
      else toYear = this.availableToDate.getFullYear();

      if (fromYear <= toYear) {
        for (let i = 0; i <= toYear - fromYear; i++) {
          this.years.push(fromYear + i);
        }
      }
    },
    firstPickerChange(value) {
      if(!value) return;
      //设置第二个选中只能从第一个结束后的日期开始
      var fromDate =new Date( value.toDate.valueOf());
      fromDate.setDate(fromDate.getDate()-7)
      this.secondPickerFromDate = fromDate;
      this.pickerChange();
    },
    pickerChange() {
      var firstValue = this.$refs.firstPicker.getCurrentValue() || {};
      var secondValue = this.$refs.secondPicker.getCurrentValue() || firstValue;
      var value = {
        fromDate: firstValue.fromDate,
        toDate: secondValue.toDate,
        value1: firstValue,
        value2: secondValue,
      };
      console.log(value);
      this.$emit("change", value);
    },
  },
};
</script>

<style></style>
